<template>
	<view class="search">
		<!-- 搜索区域 -->
		<searchCom :mykey="key" @sonInput="myInput" @sonComfirm="myconfirm" />
		<!-- 联想区域 -->
		<view class="think" v-if="thinkList.length>0">
			<view class="item" @click="toSearchList(item.item)" v-for="(item, index) in thinkList" :key="index">
				<rich-text :nodes="item.htmlitem"></rich-text>
			</view>
		</view>
		<!-- 历史区域 -->
		<view class="history">
			<view class="title">
				<view class="work">
					历史搜索
				</view>
				<icon type="clear" size="16" @click="myClear"></icon>
			</view>
			<view class="items">
				<view class="item" v-for="(item, index) in historyList" :key="index" @click="toSearchList(item)">
					{{ item }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 导入搜索组件
	import {
		goodSearch
	} from '../../api/searchList.js'
	import searchCom from '../../components/searchCom.vue'
	export default {
		data() {
			return {
				key: '',
				// 历史数据
				historyList: [],
				// 联想的数据源
				thinkList: [],
				time: null // 定时器
			}
		},
		// 显示时清空数据
		onShow() {
			//清空输入框
			this.key = ''
			// 联想数据清空
			this.thinkList = []
		},
		onLoad() {
			// 每次重新打开页面时，应该将数据从 storage 中取出赋值给 historyList
			this.historyList = uni.getStorageSync('history') || []
		},
		methods: {
			// 点击联想选项跳转到搜索列表页面中
			toSearchList(item) {
				console.log(item)
				uni.navigateTo({
					url: `/pages/search/search?key=${item}`
				})
			},
			// 在输入框中输入内容时会触发
			// 我们有这里完成联想操作
			myInput(key) {
				this.key = key
				clearTimeout(this.time)
				this.time = setTimeout(async () => {

					// 开始联想
					const res = await goodSearch({
						query: key,
						pagenum: 1,
						pagesize: 5
					})
					// 筛选数据：所有列表中的 goods_name
					this.thinkList = res.data.message.goods.map(item => {
						return {
							item: item.goods_name,
							// 将关键字使用 text 标签包裹起来
							htmlitem: '<div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">' + item.goods_name.replace(
								key, `<span style="color: red">${key}</span>`) + '</div>'	
						}
					})
					// 解决数据返回慢的问题
					this.$nextTick(()=>{
						console.log(this.key)
						if (this.key.trim() === '') {
							this.thinkList = []
							return
						}
					})
				}, 1000)

			},
			// 清空历史搜索
			myClear() {
				this.historyList = []
				uni.removeStorageSync('history')
			},
			// 在输入框中点击回车按钮时触发
			myconfirm(key) { // key 输入框中的关键字
				// 将搜索关键字保存到历史数据中
				this.historyList.unshift(key)
				// 使用 set 对象进行去重
				this.historyList = [...new Set(this.historyList)]
				// 将数据还得保存到本地
				uni.setStorageSync('history', this.historyList)
				// 跳转到搜索列表页面
				uni.navigateTo({
					url: `/pages/search/search?key=${key}`
				})
			}
		},
		components: {
			searchCom
		}
	}
</script>

<style lang="less">
	.search {
		position: relative;

		.think {
			background-color: #ddd;
			position: absolute;
			top: 90rpx;
			left: 0;
			width: 100%;
			padding: 16rpx;
			box-sizing: border-box;

			.item {
				font-size: 12px;
				color: #666;
				line-height: 60rpx;

			}
		}

		.history {
			padding: 0 16rpx;

			.title {
				height: 88rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.work {}

				icon {
					margin-right: 16rpx;
				}
			}

			.items {
				display: flex;
				flex-wrap: wrap;

				.item {
					background-color: #dddddd;
					padding: 20rpx 24rpx;
					margin-right: 30rpx;
					margin-bottom: 18rpx;
				}
			}
		}
	}
</style>
